import classNames from 'classnames';
import { useContext } from 'react';
import { useSelector } from 'react-redux';
import { useLocation, useNavigate } from 'react-router-dom';
import { Page } from '../../constant/Page';
import { ThemeContext } from '../../context/ThemeContext';
import useNav from '../../hook/useNav';
import IcLogo from '../../image/ic-logo.png';
import Button from '../Button';
import style from './SideMenu.module.scss';
import { RootState } from '../../redux/store';
type Props = {
  hasTopBar: boolean;
};

const SideMenu = ({ hasTopBar }: Props) => {
  const location = useLocation();
  const navigate = useNavigate();
  const nav = useNav();

  const { toggleTheme, image: { IcAnnouncement, IcAnnouncementRed, IcTheme }, } = useContext(ThemeContext);

  const {
    auth: { accountInfo },
    ui: { unreadAnnouncement },
  } = useSelector((rootState: RootState) => rootState);

  const onNavigate = (path: string) => () => navigate(path);


  return (
    <div className={classNames(style.self, { [style.topBar]: hasTopBar })}>
      <div className={style.logo}>
        <img src={IcLogo} />
      </div>
      <div className={style.user}>{accountInfo?.FUserName ?? '-'}</div>
      <div className={style.icons}>
        <img src={IcTheme} onClick={toggleTheme} />
        <img
          src={unreadAnnouncement > 0 ? IcAnnouncementRed : IcAnnouncement}
          onClick={onNavigate(Page.Announcement)}
        />
      </div>
      {nav.map((v) => (
        <div
          key={v.id}
          className={classNames(style.nav, {
            [style.selected]: location.pathname.startsWith(v.path),
          })}
          onClick={onNavigate(v.path)}
        >
          <img src={v.img} />
          <div>{v.value}</div>
        </div>
      ))}

      <div className={style.item}>
        <Button appearance="text" className={style.logout} onClick={onNavigate(Page.SignOut)}>
          登出
        </Button>
      </div>
    </div>
  );
};

export default SideMenu;
